<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body,#box{
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        #context,#show{
           width: 600px;
           height: 300px;
           border: 1px solid skyblue;
           margin: 10px auto;
            padding: 10px;
        }
        #text , #show-context{
            height: 80%;
            width: 100%;
        }
        #show-context{
            border: 1px solid darkblue;
            padding: 10px;
            box-sizing: border-box;
        }
        #text textarea{
            height: 100%;
            width: 100%;
        }
        #message , #show-message{
            height: 20%;
            width: 100%;
            margin-top: 10px;
        }
    </style>
<!--    <script type="module">-->
<!--        import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/components/format-date/format-date.js';-->
<!--    </script>-->
</head>
<body>

<div id="box">
    <div id="context">
        <div id="text">
            <textarea></textarea>
        </div>
        <div id="message">

            <button id="submit">提交</button>
        </div>
    </div>
    <div id="show">
        <div id="show-context">

        </div>
        <div id="show-message">
<!--            <sl-format-date lang="ch"></sl-format-date>-->
            <button id="search">搜索</button>
            <input id="pageNow" placeholder="请输入起始页码">
            <input id="pageSize" placeholder="请输入显示多少条数据">
            <button id="up">点赞</button>
            <button id="down">点踩</button>
        </div>
    </div>
</div>
<script type="module">
    import  "./lib/axios.js";

    const search = document.querySelector('#search');
    const showContext = document.querySelector('#show-context');
    const submit = document.querySelector('#submit');
    const content = document.querySelector('textarea');
    const up = document.querySelector('#up');
    const down = document.querySelector('#down');


    //搜索功能
    search.onclick = function (){
        const pageNow = document.querySelector('#pageNow').value;
        const pageSize = document.querySelector('#pageSize').value;
        axios.get(`http://shenxiaoxu.com:3030/getData?pageNow=${pageNow}&pageSize=${pageSize}`, {

        }).then(value=>{
            let html = '';
            value.data.data.forEach(item=>{
                html += `
                    <p> 内容为 : ${item.context}</p>
                `
            })
            showContext.innerHTML = html;
        });
    }

    //添加功能
    submit.onclick = function (){
        console.log(111)
        axios.post('http://shenxiaoxu.com:3030/addData',{
            context : content.value,
            addTime : Date.now()
        }).then(value=>{
            if(value.data.code === 1){
                console.log(value)
                alert('添加成功');
                let html = '';
                    html += `
                    <p> 内容为 : ${value.data.data.context}</p>
                `

                showContext.innerHTML = html;
            }

        })
    }

    //点踩和点赞
    up.onclick = function (){

    }

</script>
</body>
</html>